<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
<title>js第3课-02-改变div样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="这是js第3课-02-改变div样式">

<style type="text/css">
#div1 {
	width: 200px;
	height: 200px;
	background: red;
}
</style>

<script type="text/javascript">
	function setStyle(styleName, styleValue) {
		var div1 = document.getElementById("div1");
		// 第2种操作属性的方法：方括号
		div1.style[styleName] = styleValue;
	}

	function changeWidth() {
		var div1 = document.getElementById("div1");
		div1.style.width = '400px';
	}
	function changeHeight() {
		var div1 = document.getElementById("div1");
		div1.style.height = "400px";
	}
	function changeColor() {
		var div1 = document.getElementById("div1");
		div1.style.background = "green";
	}
</script>

</head>

<body>
	<!-- <input type="button" value="变宽" onclick="changeWidth()"> -->
	<!-- <input type="button" value="变高" onclick="changeHeight()"> -->
	<!-- <input type="button" value="变绿色" onclick="changeColor()"> -->
	<input type="button" value="变宽" onclick="setStyle('width','600px')">
	<input type="button" value="变高" onclick="setStyle('height','600px')">
	<input type="button" value="变蓝色"
		onclick="setStyle('background','blue')">
	<div id="div1"></div>
</body>

</html>